<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <!-- 此处设置对移动端页面开发很重要，该设置确保页面与设备相适应 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link type="text/css" rel="stylesheet" href="resources/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="resources/css/my.css">


    <title>Insert title here</title>



    <style type="text/css">
        html {
            height: 100%;
            /* 高度填充整个窗口. */
        }

        body {
            height: 100%;
            /* 高度填充整个html */
            padding: 0;
            /* 内边距为0 */
            margin: 0;
            /* 外边距为0 */
            background-color: #F5F5F5;
            /* 整个页面背景为淡灰色 */
            /*background-image: url(resources/images/c4902f4db007f6522a7ecd5c6d2cf152.jpg);*/
            background-size: 100% 100%;
        }

        .my-container {

            position: fixed;
            /*固定定位*/
            left: 0px;
            top: 0px;
            right: 0px;
            bottom: 0px;

            /*background-color: red;*/

        }

        .my-header {
            position: absolute;
            /*绝对定位，即相对于父元素的定位*/
            left: 0px;
            top: 0px;
            width: 100%;
            height: 40px;

            display: flex;
            /*定义本元素为flex容器*/

            /* 指定flex容器主轴排列方向（与其垂直的方向即为交叉轴）， flex容器内部元素的排列方向*/
            ;
            flex-direction: row;
            justify-content: center;
            /*指定主轴的对齐方式*/
            align-items: center;
            /*指定交叉轴的对齐方式*/
            ;

            color: white;
            background-color: #0077DD;

        }

        .my-main {
            position: absolute;
            left: 0px;
            top: 40px;
            right: 0px;
            bottom: 0px;

            overflow: auto;
            padding: 10px;
        }
    </style>

</head>

<body>

    <div id="app" class="my-container">

        <div class="my-header">
            用户注册
            <i @click="toHome" style="position:absolute;left:10px;top:5px;" class="fa fa-angle-left fa-2x"></i>
        </div>

        <div class="my-main">
           
            <form>
                <div class="form-group">
                    <label>账号</label>
                    <input v-model="user.u_id" type="text" class="form-control" placeholder="请输入账号">
                </div>
                <div class="form-group">
                    <label>姓名</label>
                    <input v-model="user.u_name" type="text" class="form-control" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label>密码</label>
                    <input v-model="user.u_pwd" type="password" class="form-control" placeholder="请输入密码">
                </div>
                <div class="form-group">
                    <label>确认密码</label>
                    <input v-model="user.u_repwd" type="password" class="form-control" placeholder="请再输入一次密码">
                </div>

                <div class="form-group">

                    <div><label>性别</label></div>

                    <input v-model="user.u_sex" type="radio" id="boy" name="sex" value="男" class="my-radio">
                    <label for="boy">男</label>

                    <input  v-model="user.u_sex" type="radio" id="girl" name="sex" value="女" class="my-radio">
                    <label for="girl">女</label>

                </div>

                <div class="form-group">
                    <label>生日</label>
                    <input v-model="user.u_birth" type="date" class="form-control" placeholder="出生日期">
                </div>

                <div class="form-group">
                    <label>学历</label>
                    <select v-model="user.u_edu" class="form-control">
                        <option value="-1">请选择</option>
                        <option value="高中">高中</option>
                        <option value="专科">专科</option>
                        <option value="本科">本科</option>
                        <option value="硕士">硕士</option>
                        <option value="博士">博士</option>
                    </select>
                </div>

                <div class="form-group">

                    <div><label>兴趣爱好</label></div>

                    <input class="my-checkbox" id="chk1" v-model="user.u_hobby" type="checkbox" value="读书" ><label for="chk1" >读书</label>
                    <input class="my-checkbox" id="chk2" v-model="user.u_hobby" type="checkbox" value="篮球" ><label for="chk2" >篮球</label>
                    <input class="my-checkbox" id="chk3" v-model="user.u_hobby" type="checkbox" value="游泳" ><label for="chk3" >游泳</label>

                    

                </div>

                <button type="button" class="btn btn-primary btn-block" @click="execRegist" >提交</button>
            </form>

        </div>



    </div>




</body>

<!-- 在body结尾之后引入以下js文件。 注意导入顺序不可以随意改变。 -->
<script src="resources/js/jquery-3.3.1.slim.min.js"></script>
<script src="resources/js/popper.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script src="resources/js/vue.min.js"></script>
<script src="resources/layer_mobile/layer.js"></script>
<script src="resources/js/axios.min.js"></script>
<script src="resources/js/my-mobile.js"></script>

<script>
    /*
        vue是一个数据驱动式javascript框架：数据改变，界面即改变，需要改变界面，仅需改变数据。
    */



    var vm = new Vue({
        el: '#app',//指定渲染的元素
        data: {//定义数据

            user:{
                u_edu:'-1',
                u_hobby:[]
            }

        },
        methods: {//定义方法
            //调转到注册页
            toHome() {
                location.href = 'home.html';
            },
            execRegist(){
                this.$post('/execRegist.jsp',this.user)
                    .then(()=>{
                        setTimeout(()=>{
                            location.href='login.html';
                        },1000);
                       
                    });
            }
        },
        mounted() {//定义界面渲染完成后需要执行的代码


        }
    });









</script>


</html>